/* eslint-disable */
import React, { Component } from 'react';
import styles from './index.less';
import Animation from '../../common/Animation';
import { Popover } from 'antd';

export default class CockpitButtonGroup extends Component{

  static defaultProps = {
    activeIndex: -1,
    data: [],
    handleClick: null,
    id: "topChainWrapper" + Math.random().toFixed(4)
  }

  state = {
    width: 0
  }

  componentDidMount() {
    this.setState({
      width: this.getWrapperWidth()
    })
  }

  componentDidUpdate(prevProps, prevState) {
    let w = this.getWrapperWidth();
    if(prevState.width !== w) {
      this.setState({
        width: w
      })
    }
  }

  getPopover = (data) => {
    return (
      <div className={styles["top-popover-explain"]}>
        { data }
      </div>
    )
  }

  handleClick = (i, m) => {
    const { handleClick } = this.props;
    handleClick && handleClick(i, m);
  }

  getWrapperWidth = () => {
    const { id } = this.props;
    let el = document.getElementById(id);
    return el ? el.offsetWidth : 0;
  }

  render() {
    const { activeIndex, data, id } = this.props;

    return (
      <Animation className="bounce">
        <div
          className={styles["cockpit-top-chain-wrapper"]}
          id={id}
          style={{
            marginLeft: - this.state.width / 2
          }}
        >
          {
            (data || []).map((m, i) => {
              let children = (
                <div
                  className={activeIndex === i ? styles["active"] : styles["group-item"]}
                  onClick={this.handleClick.bind(this, i, m)}
                >
                  {m.name}
                </div>
              )

              let pop = (
                <Popover
                  key={i}
                  content={this.getPopover(m.detail)}
                  placement="bottom"
                  trigger="hover"
                  title={null}
                  getPopupContainer={() => document.getElementById(id)}
                >
                  {children}
                </Popover>
              )

              return m.detail ? pop : children
            })
          }
        </div>
      </Animation>
    )
  }
}
